<template>
  <div>
    <el-drawer :model-value="visible" title="项目流程" size="500px" @close="closeHandle" @closed="closed">
      <div class="demo-drawer__content">
        <el-form :model="form" ref="formRef" :rules="formRules" label-position="right">
          <!-- 项目阶段 -->
          <!-- 选择第几阶段展示对应的 -->
          <!-- <el-form-item label="项目阶段" required :label-width="formLabelWidth">
            <el-radio-group disabled v-model="form.jieduan" @change="changeRadio">

              <el-radio :label="item.value" v-for="(item, index) in company" :key="index"> {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item> -->
          <!-- 操作类型 -->
          <!-- <el-form-item label="操作类型" prop="status" :label-width="formLabelWidth">
            <el-select v-model="form.status" default-first-option :reserve-keyword="false" placeholder="请选择操作类型"
              @change="changeClick">
              <el-option v-for="item in platformTypeData" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item> -->

          <el-form-item label="日期" prop="date" :label-width="formLabelWidth">
            <el-date-picker v-model="form.date" type="date" placeholder="请选择日期" :size="size" />
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.content" placeholder="请输入备注" show-word-limit rows="4" type="textarea"
              autocomplete="off" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-space>
          <el-button type="info" plain :loading="loading" @click="cancelHandle">取消</el-button>
          <el-button type="primary" :loading="loading" @click="confirmHandle">提交保存</el-button>
        </el-space>
      </template>
    </el-drawer>

  </div>
</template>
<script setup>
import { ref, computed, reactive } from 'vue'
import { xiangmuqueren } from "@/api/project.js";
import { toast } from "@/hook/toast";
import { delay } from "@/utils";

const emits = defineEmits(['update:modelValue', 'addSuccess'])
const formLabelWidth = '80px'

const size = ref("default");

const loading = ref(false);
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  }
})

const formRef = ref(null)
const form = reactive({
  xiangmu_id: '',
  jieduan: '1',
  status: '',
  date: '',
  content: ''
})

const company = {
  '1': {
    value: '1',
    label: '设计',
  },
  '2': {
    value: '2',
    label: '开发',
  },
  '3': {
    value: '3',
    label: '验收',
  }
};


const platformTypeData = ref([
  {
    value: '1',
    label: '开始设计',
  }, {
    value: '2',
    label: '完成设计',
  },

])

const formRules = computed(() => ({
  status: [
    {
      required: true,
      message: '请选择类型',
      trigger: 'chage'
    }
  ],
  date: [
    {
      required: true,
      message: '请选择日期',
      trigger: 'chage'
    }
  ]
}))

const visible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    console.log(value, '属性')
    emits('update:modelValue', value)
  }
})

// 取消
const cancelHandle = () => {
  visible.value = false
}
function closed() {
  resetForm()
}
const closeHandle = () => {
  visible.value = false
};

// 关闭组件
function resetForm() {
  form.xiangmu_id = ''
  form.jieduan = ''
  form.status = ''
  form.date = ''
  form.content = ''
  formRef.value.resetFields()
}
// 选择阶段的时候展示
function changeRadio(e) {
  platformTypeData.value = []
  if (e == 1) {
    platformTypeData.value = [
      {
        value: '1',
        label: '开始设计',
      }, {
        value: '2',
        label: '完成设计',
      },
    ]
  }

  if (e == 2) {
    platformTypeData.value = [
      {
        value: '3',
        label: '开始开发',
      },
      {
        value: '4',
        label: '完成开发',
      }
    ]
  }
  if (e == 3) {
    platformTypeData.value = [
      {
        value: '5',
        label: '开始验收',
      },
      {
        value: '6',
        label: '完成验收',
      }
    ]
  }
  console.log('res', e)
}
// 选择类型的时候
function changeClick(e) {
  console.log('changeClick', e)
}
// 编辑传来的方法
function editHandle(row) {
  console.log('传来的参数', row)
  form.xiangmu_id = row
  visible.value = true
}
function editType(i) {
  console.log('查看第几阶段', i)
  form.jieduan = i.toString()

  if (i == 1) {
    platformTypeData.value = [
      {
        value: '1',
        label: '开始设计',
      }, {
        value: '2',
        label: '完成设计',
      },
    ]
  }

  if (i == 2) {
    platformTypeData.value = [
      {
        value: '3',
        label: '开始开发',
      },
      {
        value: '4',
        label: '完成开发',
      }
    ]
  }
  if (i == 3) {
    platformTypeData.value = [
      {
        value: '5',
        label: '开始验收',
      },
      {
        value: '6',
        label: '完成验收',
      }
    ]
  }

}
function editTypes(e) {
  console.log(e, '查看数据阶段')
  form.status = e
}

// 提交的时候
function confirmHandle() {
  formRef.value.validate(async flag => {
    if (!flag) return
    loading.value = true
    const { xiangmu_id, jieduan, status, date, content } = form
    const payload = {
      xiangmu_id, jieduan, status, date, content
    }
    console.log(payload, 'payload')
    loading.value = false
    const resp = await xiangmuqueren(payload)
    const { code, msg } = resp
    await delay(200)
    toast({ title: msg })
    if (code !== 1) return
    triggerUpdate()
  })
}

defineExpose({
  editHandle,
  editType,
  editTypes
})

function triggerUpdate() {
  emits('addSuccess')
  resetForm()
  visible.value = false
}


</script>